<template>
<div class="fluid field field_zip-wrapper" :_name="field.name">

  <label :class="{must: field.is_must}" v-if="showTitle">{{field.title}}</label>
  <div class="ui  " :class="[{'inline fields':zip_inline},{'segment':showTitle}]">
    <template v-for="field in fields">
      <myfields :class="{inlineField:zip_inline}" :field="field" :param="param" :ctl="ctl" :vo="vo" @setVo='toSetEditVo'></myfields>
</template>
  </div>
</div>
</template>

<script type="text/ecmascript-6">
import tool from 'src/util/tool';
import myfields from 'components/edit/fieldsforfiled_zip';

export default {
  data() {
    return {
      val: '',
      param: {},
      fields: [],
      v: ''
    }
  },
  components: {
    myfields
  },
  methods: {
    toSetEditVo(name, val) {
      this.$emit('setVo', name, val)
    },
    setV() {
      let vo = this.$store.state.global.editVo
      this.v = vo[this.field.name];
    },
    getFields() {
      let ids = this.field.attrs_zip
      let rs = this.$store.state.global.editCom_fields
      this.fields = rs.filter(item => {
        return ids.contains(item.id)
      })
    },
  },
  watch: {
    v: function(val, old) {
      //        tool.cl(val, old)
      if (val != old) {

        this.val = val
      }

    },
    val: function(val, old) {
      //        tool.cl(val, old)
      if (val != old) {
        // let vo = this.$store.state.global.editVo
        // vo[this.field.name] = val;
        // util.store.commit(this,'setEditVo', vo);
        this.$emit('setVo', this.field.name, val)
      }
    }
  },
  computed: {
    showTitle() {
      return this.field.showZipTitle
    },
    placeholder() {
      return `请输入${this.field.title}`
    },
    zip_inline() {
      return this.field.inline
    }
  },
  props: ['field', 'vo', 'ctl'],
  created() {
    this.param.in_zip_inline=this.field.inline;
    this.getFields()
  },
  mounted() {
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
.field_zip-wrapper {
  .inline.fields.inlineField{

    margin-bottom:0;
    &:first-child{
      margin-left:0px;
    }
    margin-left:30px;
  }
}
</style>
